<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>

    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>文件展示模块</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" th:href="@{/plugins/elementui/index.css}">

    <link rel="stylesheet" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">

    <link rel="stylesheet" th:href="@{/css/style.css}">

</head>

<body class="hold-transition">

<div id="app">
    <!-- 标题栏 -->
    <font face="楷体" align="center" style="color: #66b1ff">
        <h1>文件管理页面</h1>
    </font>

    <!-- 有正文内容的意思在里面 -->
    <div class="app-container">

        <!--里面包含的内容是主工作区-->
        <div class="box">

            <!--查询的操作区-->
            <div class="filter-container">
                <el-input placeholder="输入查找关键字" v-model="paginationVague.filenameVague" style="width: 260px;" class="filter-item"></el-input>&nbsp;&nbsp;&nbsp;
                <el-button type="primary" @click="getAllQuery()" class="dalfBut" style="width: 150px;">查询</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-input placeholder="文件路径" :disabled="true" v-model="pagination.filePath" style="width: 666px;" class="filter-item"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="primary" class="butT" @click="handleReturn()" style="width: 200px;">返回上一级目录</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="primary" class="butT" @click="handleCreate()" style="width: 200px;">新建文件</el-button>&nbsp;&nbsp;
                <el-button type="primary" class="butT" @click="returnMain()" style="width: 60px;">返回</el-button>
                <!--<form method="post" enctype="multipart/form-data" action="/document/file/upload">
                    <input type="hidden" name="filePath" v-model="pagination.filePath" >
                    <input type="file" name="files" multiple>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button style="background-color: #66b1ff">上传文件</button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="file" name="folders" multiple webkitdirectory>&nbsp;&nbsp;&nbsp;&nbsp;
                    <button style="background-color: #66b1ff">上传文件夹</button>
                </form>-->
                <table>
                    <tr>
                        <td>
                            <form method="post" enctype="multipart/form-data" action="/document/file/uploadFiles">
                                <input type="hidden" name="filePath" v-model="pagination.filePath" >
                                <input type="file" name="files" multiple>&nbsp;&nbsp;&nbsp;&nbsp;
                                <button style="background-color: #66b1ff">上传文件</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </form>
                        </td>
                        <td>
                            <form method="post" enctype="multipart/form-data" action="/document/file/uploadFolders">
                                <input type="hidden" name="filePath" v-model="pagination.filePath" >
                                <input type="file" name="folders" multiple webkitdirectory>&nbsp;&nbsp;&nbsp;&nbsp;
                                <button style="background-color: #66b1ff">上传文件夹</button>
                            </form>
                        </td>
                        <td>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <p style="color: red" th:text="${uploadFileMessage}" th:if="${not #strings.isEmpty(uploadFileMessage)}"></p>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <p style="color: red" th:text="${uploadFolderMessage}" th:if="${not #strings.isEmpty(uploadFolderMessage)}"></p>
                        </td>
                    </tr>
                </table>
            </div>

            <!--<el-upload  action="" :before-upload='beforeUpload' :http-request="handleSuccessList5" :on-change="handleChange5" :file-list="fileList5" :on-remove='remove5' list-type="picture" multiple :limit='3'>
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">每张图片大小不超过1M</div>
            </el-upload>
            <img th:src="@{/imgs/favicon.ico}" width="25" height="25" alt="B">-->
            <!--导航栏，用到了双向数据模型绑定-->
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <el-table-column prop="fileType" align="center" label="文件类型" width="80"></el-table-column>

                <el-table-column prop="filename" label="文件名称" width="256"></el-table-column>

                <el-table-column prop="fileSize" label="文件大小" width="200"></el-table-column>

                <el-table-column prop="gmtUpdate" type="date" format="yyyy/MM/dd" label="修改时间"></el-table-column>

                <el-table-column label="操作" align="center" width="566">

                    <!--slot-scope="scope"表示将整个行对象封装成一个scope，而scope.row表示改行中存在的数据-->
                    <template slot-scope="scope">
                        <!--handleUpdate(scope.row)表示将这一行的数据传递到handleUpdate这个监听事件方法中去让其使用 :visible.sync="dialogFormVisibleOpen"-->
                        <el-button type="primary" size="mini" @click="openFolder(scope.row)" v-if="scope.row.fileJudge == 1">进入</el-button>
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">重命名</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                        <el-button type="primary" size="mini" @click="handleMove(scope.row)">移动</el-button>
                        <el-button type="primary" size="mini" @click="handleCopy(scope.row)">复制</el-button>
                        <el-button type="primary" size="mini" @click="handleDown(scope.row)" v-if="scope.row.fileJudge == 0">下载</el-button>
                    </template>

                </el-table-column>

            </el-table>

            <!--分页组件-->
            <div class="pagination-container">
                <!--class="pagiantion" 代表映射表，@current-change 绑定事件，current-page 加载指定当前页码值，page-size 需要加载的数据，layout 表示布局格式，total也是在加载数据，好像加载的是一共有多少条数据-->
                <el-pagination
                        class="pagiantion"

                        @current-change="handleCurrentChange"

                        :current-page="pagination.currentPage"

                        :page-size="pagination.pageSize"

                        layout="total, prev, pager, next, jumper"

                        :total="pagination.total">

                </el-pagination>
            </div>

            <!-- 创建文件标签弹层，里面定义了若干个表单，被点击新增之后弹出来的内容-->
            <div class="add-form">

                <el-dialog title="创建文件" :visible.sync="dialogFormVisibleCreate">
                    <!--formData是定义好的数据总名称，相当于一个类名或者对象-->
                    <el-form ref="dataAddForm" :model="pagination" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="文件名称" prop="filename">

                                    <el-input v-model="pagination.filename"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="16">

                                <el-form-item label="新文件路径" prop="filePath">

                                    <el-input v-model="pagination.filePath" :disabled="true" placeholder="pagination.filePath"/>

                                </el-form-item>

                            </el-col>

                        </el-row>


                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleCreateSure()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

            <!-- 重命名文件标签弹层，里面定义了若干个表单，点击修改的时候弹出来的内容 -->
            <div class="add-form">

                <el-dialog title="重命名文件" :visible.sync="dialogFormVisibleEdit">

                    <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="16">

                                <el-form-item label="文件新名称:" prop="newFilename">

                                    <el-input v-model="formData.newFilename" placeholder="输入文件名称（不带/）"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="16">

                                <el-form-item label="原文件名称" prop="filename">

                                    <el-input v-model="formData.filename" :disabled="true" placeholder="formData.filename"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="16">

                                <el-form-item label="文件路径" prop="filePath">

                                    <el-input v-model="formData.filePath" :disabled="true" placeholder="formData.filePath"/>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleUpdateSure()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

            <!--上面 创建文件标签弹层 与 重命名文件标签弹层 这个两个组件当formData中的数据为空时表单中为空，当formData中的数据不为空时会自动将数据填充到表单中-->

            <!--下面 移动标签弹层 与 复制标签弹层 这两个对话框里面公用了后面带Two的功能-->

            <!-- 移动标签弹层，里面定义了若干个表单，点击移动的时候弹出来的内容 -->
            <div class="add-form">

                <el-dialog title="移动操作" :visible.sync="dialogFormVisibleMove">
                    <div class="filter-container" align="center">
                        <el-input placeholder="文件路径" :disabled="true" v-model="paginationTwo.filePathTwo" style="width: 566px;" class="filter-item"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-button type="primary" class="butT" @click="handleReturnTwo()" style="width: 166px;">返回上级目录</el-button>
                    </div>

                    <el-table size="small" current-row-key="id" :data="dataListTwo" stripe highlight-current-row>

                        <el-table-column prop="filename" label="文件夹名称" ></el-table-column>
                        <el-table-column label="操作" align="center" width="186">

                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="openFolderTwo(scope.row)">进入</el-button>
                                <el-button type="primary" size="mini" @click="handleMoveSure(scope.row)">移动到这</el-button>
                            </template>

                        </el-table-column>

                    </el-table>

                    <div class="pagination-container" align="right">
                        <el-pagination
                                class="paginationTwo"
                                @current-change="handleCurrentChangeTwo"
                                :current-page="paginationTwo.currentPage"
                                :page-size="paginationTwo.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="paginationTwo.total">
                        </el-pagination>
                    </div>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel()">取消</el-button>
                    </div>

                </el-dialog>

            </div>

            <!-- 复制标签弹层，里面定义了若干个表单，点击移动的时候弹出来的内容 -->
            <div class="add-form">

                <el-dialog title="复制操作" :visible.sync="dialogFormVisibleCopy">
                    <div class="filter-container" align="center">
                        <el-input placeholder="文件路径" :disabled="true" v-model="paginationTwo.filePathTwo" style="width: 566px;" class="filter-item"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-button type="primary" class="butT" @click="handleReturnTwo()" style="width: 166px;">返回上级目录</el-button>
                    </div>

                    <el-table size="small" current-row-key="id" :data="dataListTwo" stripe highlight-current-row>

                        <el-table-column prop="filename" label="文件夹名称" ></el-table-column>
                        <el-table-column label="操作" align="center" width="186">

                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="openFolderTwo(scope.row)">进入</el-button>
                                <el-button type="primary" size="mini" @click="handleCopySure(scope.row)">复制到这</el-button>
                            </template>

                        </el-table-column>

                    </el-table>

                    <div class="pagination-container" align="right">
                        <el-pagination
                                class="paginationTwo"
                                @current-change="handleCurrentChangeTwo"
                                :current-page="paginationTwo.currentPage"
                                :page-size="paginationTwo.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="paginationTwo.total">
                        </el-pagination>
                    </div>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel()">取消</el-button>
                    </div>

                </el-dialog>

            </div>

            <!--查询结果显示弹层-->
            <div class="add-form">

                <el-dialog title="查询结果显示" :before-close="handleDialogClose" :visible.sync="dialogFormVisibleQuery">

                    <el-table size="small" current-row-key="id" :data="dataListTwo" stripe highlight-current-row>
                        <el-table-column prop="fileType" label="文件类型" with="60" ></el-table-column>
                        <el-table-column prop="filename" label="文件名称" with="155" ></el-table-column>
                        <el-table-column prop="filePath" label="文件路径" ></el-table-column>
                    </el-table>

                    <div class="pagination-container" align="right">
                        <el-pagination
                                class="paginationVague"
                                @current-change="handleCurrentChangeVague"
                                :current-page="paginationVague.currentPage"
                                :page-size="paginationVague.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="paginationVague.total">
                        </el-pagination>
                    </div>

                    <div slot="footer" class="dialog-footer" align="center">
                        <el-button @click="cancelVague()">确定</el-button>
                    </div>

                </el-dialog>

            </div>

            <!--锁屏弹层-->
            <div class="add-form">

                <el-dialog title="操作正在进行中，完成后自动关闭该弹窗" :before-close="handleDialogCloseTwo" :visible.sync="dialogFormVisibleLock">

                </el-dialog>

            </div>

        </div>

    </div>

</div>

</body>

<!-- 引入组件库 -->
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/plugins/elementui/index.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/axios-0.18.0.js}"></script>

<script>
    var vue = new Vue({
        el: '#app',
        //这个data里面定义的数据是在上面页面中已经有的被命名好的数据总称，且他们之间的内容是一样的
        data:{
            dataList: [],//定义了当前页要展示的列表数据
            dataListTwo: [],//定义了移动或者复制时要展示的列表数据
            dialogFormVisibleCreate: false,//创建文件表单是否可见
            dialogFormVisibleEdit:false,//重命名文件表单是否可见
            dialogFormVisibleMove:false,//移动文件弹窗是否可见
            dialogFormVisibleCopy:false,//复制文件弹窗是否可见
            dialogFormVisibleQuery:false,//查询文件弹窗是否可见
            dialogFormVisibleOpen:false,//进入文件夹按钮是否可见
            dialogFormVisibleLock:false,//锁屏弹窗是否可见
            formData: {},//定义收集的表单数据
            rules: {
                filename: [{ required: true, message: '文件名称为必填项', trigger: 'blur' }]
/*                filePath: [{ required: true, message: '按下回车键即可搜索该路径下的文件', trigger: 'blur' }]*/
            },//定义校验规则
            pagination: {
                currentPage: 1,
                pageSize:13,
                total:0,
                filePath: "/",
                filename: ""
            },//定义分页相关模型数据，filename这个属性只是在新建文件夹中使用到了
            paginationTwo: {
                currentPage: 1,
                pageSize:6,
                total:0,
                filePathTwo: "/",
                id:0
            },
            paginationVague: {
                currentPage: 1,
                pageSize:6,
                total:0,
                filenameVague: ""
            }//filenameVague 这个动态绑定属性只是在查询这一个功能上用到了
        },

        //钩子函数，VUE对象初始化完成后自动执行，在浏览器中输入 http://localhost:8080/pages/books.html 地址后，自动会执行 created() 中的代码，从而实现填充页面
        created() {
            //调用查询全部数据的操作
            this.getAll();
        },

        //这个method中定义的方法都是在上面页面中被指定的某一个控件被点击之后会执行的方法，相当于就是事件监听
        methods: {

            //分页查询与条件查询用的都是这个，这里用了两种传递函数的方式，其中有用了？与 &
            getAll() {
                //组织参数，拼接url请求地址
                // console.log(this.pagination.type);
                param = "?filePath="+this.pagination.filePath;
                console.log(param);//上面这几行代码是做条件查询的时候用的

                //发送异步请求，这里连接的就是controller中分页查询的操作
                axios.get("/document/file/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then((res)=>{/*then(function (resp)*/
                    this.pagination.pageSize = res.data.data.size;
                    this.pagination.currentPage = res.data.data.current;
                    this.pagination.total = res.data.data.total;
                    this.dataList = res.data.data.records;
                });
            },

            getAllTwo() {
                param = "?filePath="+this.paginationTwo.filePathTwo;

                //发送异步请求，这里连接的就是controller中分页查询的操作
                axios.get("/document/file/subFunction/"+this.paginationTwo.currentPage+"/"+this.paginationTwo.pageSize+param).then((res)=>{
                    this.paginationTwo.pageSize = res.data.data.size;
                    this.paginationTwo.currentPage = res.data.data.current;
                    this.paginationTwo.total = res.data.data.total;
                    this.dataListTwo = res.data.data.records;
                });
            },

            getAllQuery(){
                param = "?filename="+this.paginationVague.filenameVague;
                this.dialogFormVisibleQuery = true;
                axios.get("/document/file/queryVague/"+this.paginationVague.currentPage+"/"+this.paginationVague.pageSize+param).then((res)=>{
                    this.paginationVague.pageSize = res.data.data.size;
                    this.paginationVague.currentPage = res.data.data.current;
                    this.paginationVague.total = res.data.data.total;
                    this.dataListTwo = res.data.data.records;
                });
            },

            //切换页码
            handleCurrentChange(currentPage) {
                //修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
                //执行查询
                this.getAll();
            },

            handleCurrentChangeTwo(currentPage) {
                this.paginationTwo.currentPage = currentPage;
                this.getAllTwo();
            },

            handleCurrentChangeVague(currentPage) {
                this.paginationVague.currentPage = currentPage;
                this.getAllQuery();
            },

            //弹出创建文件窗口
            handleCreate() {
                this.dialogFormVisibleCreate = true;
                this.resetForm();
            },

            //重置表单
            resetForm() {
                this.formData = {};
                this.pagination.filename = "";
            },

            //确认创建文件
            handleCreateSure() {          /*this.formData这个是在把表单数据赋值给控制器中定义好的方法中的Book这个对象参数的，之所以用逗号隔开了，是因为这个参数标识了@RequestBody这个注解*/
                if(this.pagination.filename=='' || this.pagination.filename.indexOf(' ')!=-1){
                    this.$message({
                        type: 'info',
                        message: '文件名不能为空或者包含空格啦~~~，要重新输入哦~~~'
                    });
                } else {
                    let flag1 = (this.pagination.filename.lastIndexOf('\.')!=(this.pagination.filename.length-1));//.不能位于最后一个位置上
                    let flag2 = (this.pagination.filename.indexOf('/')==-1);
                    let flag3 = (this.pagination.filename.indexOf('\\')==-1);
                    if(flag1 && flag2 && flag3){
                        axios.post("/document/file/add",this.pagination).then((res)=>{
                            this.dialogFormVisibleCreate = false;
                            //判断当前操作是否成功
                            if(res.data.flag){
                                //1.关闭弹层
                                this.dialogFormVisibleCreate = false;
                                this.$message.success(res.data.message);
                            }else{
                                this.$message.error(res.data.message);
                            }
                        }).finally(()=>{
                            //2.重新加载数据
                            this.getAll();
                        });
                    } else {
                        this.$message.error("文件夹命名格式不对，请重新输入！(不能包含 \\ 与 / 以及 . 不能位于最后！)");
                    }
                }

                /*axios.post("/document/file/add",this.pagination).then((res)=>{
                    this.dialogFormVisibleCreate = false;
                    //判断当前操作是否成功
                    if(res.data.flag){
                        //1.关闭弹层
                        this.dialogFormVisibleCreate = false;
                        this.$message.success(res.data.message);
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).finally(()=>{
                    //2.重新加载数据
                    this.getAll();
                });*/
            },

            //取消
            cancel(){
                this.dialogFormVisibleCreate = false;
                this.dialogFormVisibleEdit = false;
                this.dialogFormVisibleMove = false;
                this.dialogFormVisibleCopy = false;
                this.$message.info("当前操作取消");
            },

            cancelVague(){
                this.dialogFormVisibleQuery = false;
                this.$message.success("查询结束");
                this.paginationVague.filenameVague = "";
            },

            handleDialogClose(){
                this.dialogFormVisibleQuery = false;
                this.$message.success("查询结束");
                this.paginationVague.filenameVague = "";
            },

            // 删除，其中这个（row表示获取到从页面传递到监听事件中的数据）
            handleDelete(row) {
                // this.$confirm这个行代码是弹出一个警示框
                this.$confirm("此操作永久删除当前信息，是否继续？","提示",{type:"info"}).then(()=>{//警示框的确定行为
                    axios.delete("/document/file/deleteFile/"+row.id).then((res)=>{
                        if(res.data.flag){
                            this.$message.success(res.data.message);
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }).finally(()=>{
                        //2.重新加载数据
                        this.getAll();
                    });
                }).catch(()=>{//警示框的取消行为
                    this.$message.info("取消操作");
                });
            },

            //弹出重命名窗口
            handleUpdate(row) {
                axios.get("/document/file/updateFormData/"+row.id).then((res)=>{
                    if(res.data.flag){
                        this.dialogFormVisibleEdit=true;
                        this.formData = res.data.data;
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).finally(()=>{
                    this.getAll();
                });
            },

            //正式开始重命名
            handleUpdateSure() {     // 此时的fromData是在弹出编辑窗口时所加载的数据
                if(this.formData.newFilename=='' || this.formData.newFilename.indexOf(' ')!=-1){
                    this.$message({
                        type: 'info',
                        message: '文件名不能为空或者包含空格啦~~~，要重新输入哦~~~'
                    });
                } else {
                    const arrNew = this.formData.newFilename.split('\.');
                    const arrOld = this.formData.filename.split('\.');
                    let flag1 = (this.formData.filename.indexOf('\.')!=-1);
                    let flag2 = (this.formData.newFilename.lastIndexOf('\.')!=(this.formData.newFilename.length-1));//.不能位于最后一个位置上
                    let flag3 = (this.formData.newFilename.indexOf('/')==-1);
                    let flag4 = (this.formData.newFilename.indexOf('\\')==-1);
                    if(flag1){//为文件的处理方式
                        if(flag2 && flag3 && flag4){//格式正确
                            if(arrNew[arrNew.length-1] != arrOld[arrOld.length-1]){
                                this.$confirm("你已改变原名称的格式，这可能会造成不良后果，是否继续!","提示",{type:"info"}).then(()=>{//警示框的确定行为
                                    axios.post("/document/file/rename",this.formData).then((res)=>{
                                        if(res.data.flag){
                                            this.dialogFormVisibleEdit = false;
                                            this.$message.success(res.data.message);
                                        } else {
                                            this.$message.error(res.data.message)
                                        }
                                    }).finally(()=>{
                                        //2.重新加载数据
                                        this.getAll();
                                    });
                                }).catch(()=>{//警示框的取消行为
                                    this.$message.info("取消操作");
                                });
                            } else {
                                axios.post("/document/file/rename",this.formData).then((res)=>{
                                    if(res.data.flag){
                                        this.dialogFormVisibleEdit = false;
                                        this.$message.success(res.data.message);
                                    } else {
                                        this.$message.error(res.data.message)
                                    }
                                }).finally(()=>{
                                    //2.重新加载数据
                                    this.getAll();
                                });
                            }
                        } else {//格式不对
                            this.$message.error("文件命名格式不对，请重新输入！(不能包含 \\ 与 / 以及 . 不能位于最后！)");
                        }
                    } else {//文件夹的处理方式
                        if(flag2 && flag3 && flag4){//格式正确
                            axios.post("/document/file/rename",this.formData).then((res)=>{
                                if(res.data.flag){
                                    this.dialogFormVisibleEdit = false;
                                    this.$message.success(res.data.message);
                                } else {
                                    this.$message.error(res.data.message)
                                }
                            }).finally(()=>{
                                //2.重新加载数据
                                this.getAll();
                            });
                        } else {//格式错误处理方式
                            this.$message.error("文件夹命名格式不对，请重新输入！(不能包含 \\ 与 / 以及 . 不能位于最后！)");
                        }
                    }
                }
            },

            //返回上一级目录
            handleReturn(){
                axios.get("/document/file/gainRP").then((res)=>{
                    if(res.data.flag){
                        this.$message.success(res.data.message)
                    }
                    this.pagination.total=0
                    this.pagination.pageSize=13
                    this.pagination.currentPage=1
                    this.pagination.filePath = res.data.data
                }).finally(()=>{
                    this.getAll()
                });
            },

            //返回执行移动和替换翻找过程中的目录
            handleReturnTwo(){
                axios.get("/document/file/gainRPTwo").then((res)=>{
                    if(res.data.flag){
                        this.$message.success(res.data.message)
                    }
                    this.paginationTwo.total=0
                    this.paginationTwo.pageSize=6
                    this.paginationTwo.currentPage=1
                    this.paginationTwo.filePathTwo = res.data.data
                }).finally(()=>{
                    this.getAllTwo()
                });
            },

            //返回主页
            returnMain(){//这里需要修改一个，增加一个清空栈的操作，不然容易出问题
                axios.get("http://localhost:8080/document/users/remain").then((res)=>{
                    location.href='http://localhost:8080/document/users/remain'
                });
            },

            //打开文件夹（留意一下这里post形式传递参数的方法，用了？与 & ）
            openFolder(row){
                axios.post("/document/file/openFolder"+"?filePath="+row.filePath+"&filename="+row.filename).then((res)=>{
                    if(res.data.flag){
                        this.$message.success(res.data.message)
                    }
                    this.pagination.total=0
                    this.pagination.pageSize=13
                    this.pagination.currentPage=1
                    this.pagination.filePath = row.filePath+row.filename+"/"
                }).finally(()=>{
                    this.getAll()
                });
            },

            //打开执行移动和替换翻找过程中的文件
            openFolderTwo(row){
                axios.post("/document/file/openFolderTwo"+"?filePath="+row.filePath+"&filename="+row.filename).then((res)=>{
                    if(res.data.flag){
                        this.$message.success(res.data.message)
                    }
                    this.paginationTwo.total=0
                    this.paginationTwo.pageSize=6
                    this.paginationTwo.currentPage=1
                    this.paginationTwo.filePathTwo = row.filePath+row.filename+"/"
                }).finally(()=>{
                    this.getAllTwo();
                });
            },

            //弹出移动文件窗口
            handleMove(row){
                this.paginationTwo.filePathTwo = '/';
                this.dialogFormVisibleMove = true;
                this.paginationTwo.id = row.id;
                axios.get("/document/file/clearStackTwo").then((res)=>{
                    //主要是为了清空栈中的路径
                }).finally(()=>{
                    this.getAllTwo()
                });
            },

            //确认移动文件
            handleMoveSure(row){
                this.$message.success("移动开始，请稍等！");
                // param = "?filename="+row.filename;
                // param += "&filePath="+row.filePath;
                this.dialogFormVisibleLock = true;
                axios.get("/document/file/removeFile/"+this.paginationTwo.id+"/"+row.id).then((res)=>{
                    this.dialogFormVisibleLock = false;
                    if(res.data.flag){
                        this.$message.success(res.data.message);
                        this.dialogFormVisibleMove = false;
                    }else{
                        this.$confirm("该文件在目标路径下已有重名文件，是否确定覆盖重名文件!","提示",{type:"info"}).then(()=>{//警示框的确定行为
                            this.dialogFormVisibleLock = true;
                            axios.get("/document/file/coverFile/"+"remove"+"/"+this.paginationTwo.id+"/"+row.id).then((res)=>{
                                this.dialogFormVisibleLock = false;
                                if(res.data.flag){
                                    this.$message.success(res.data.message);
                                    this.dialogFormVisibleMove = false;
                                } else {
                                    this.$message.error(res.data.message);
                                }
                            }).finally(()=>{
                                this.getAll();
                            });
                        }).catch(()=>{//警示框的取消行为
                            this.$message.info("移动操作已被取消！");
                        });
                        // this.$message.error(res.data.message);
                    }
                    // this.dialogFormVisibleMove = false;
                }).finally(()=>{
                    this.getAll();
                });
            },

            //弹出复制文件的窗口
            handleCopy(row){
                this.paginationTwo.filePathTwo = '/';
                this.dialogFormVisibleCopy = true;
                this.paginationTwo.id = row.id;
                axios.get("/document/file/clearStackTwo").then((res)=>{
                    //主要是为了清空栈中的路径
                }).finally(()=>{
                    this.getAllTwo();
                });
            },

            //确认复制文件
            handleCopySure(row){
                this.$message.success("复制开始，请稍等！");
                // param = "?filename="+row.filename;
                // param += "&filePath="+row.filePath;
                this.dialogFormVisibleLock = true;
                axios.get("/document/file/copyFile/"+this.paginationTwo.id+"/"+row.id).then((res)=>{
                    this.dialogFormVisibleLock = false;
                    if(res.data.flag){
                        this.$message.success(res.data.message);
                        this.dialogFormVisibleCopy = false;
                    }else{
                        this.$confirm("该文件在目标路径下已有重名文件，是否确定覆盖重名文件!","提示",{type:"info"}).then(()=>{//警示框的确定行为
                            this.dialogFormVisibleLock = true;
                            axios.get("/document/file/coverFile/"+"copy"+"/"+this.paginationTwo.id+"/"+row.id).then((res)=>{
                                this.dialogFormVisibleLock = false;
                                if(res.data.flag){
                                    this.$message.success(res.data.message);
                                    this.dialogFormVisibleCopy = false;
                                }else{
                                    this.$message.error(res.data.message);
                                }
                            }).finally(()=>{
                                this.getAll();
                            });
                        }).catch(()=>{//警示框的取消行为
                            this.$message.info("复制操作已被取消！");
                        });
                        // this.$message.error(res.data.message);
                    }
                    // this.dialogFormVisibleCopy = false;
                }).finally(()=>{
                    this.getAll();
                });
            },

            /*//上传文件
            uploadFile(){
                axios.post().then((res)=>{

                }).finally(()=>{

                });
                this.$confirm("复制文件在目标路径下已经重名，是否确定覆盖重名文件!","提示",{type:"info"}).then(()=>{//警示框的确定行为

                }).catch(()=>{//警示框的取消行为
                    this.$message.info("取消操作");
                });
            },*/

            //下载文件
            handleDown(row){
                this.$confirm('即将开始下载 '+row.filename+' 文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    this.$message.success("文件正在下载中，请稍等~~~")
                    location.href="http://localhost:8080/document/file/download?filePath="+row.filePath+"&filename="+row.filename;
                    this.$message.success("下载完成啦~~~")
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '此操作已取消！'
                    });
                });
            },

            handleDialogCloseTwo(){
                this.$message.success("请稍等，操作快要完成啦~~~");
            }

            //以上这些方法中的res.data的数据类型全是R对象的格式，因为在控制器方法中是这么显示的
        }
    })

</script>
</html>